<template>
  <view class="page container">
    <u-navbar
      placeholder
      title="签到赢好礼"
      autoBack
      leftIconColor="#fff"
      bgColor="transparent"
      titleStyle="color:#fff"
    >
    </u-navbar>
    <image src="/pages2/static/sign_img1.png" class="sign_img1"></image>
    <image src="/pages2/static/sign_img2.png" class="sign_img2"></image>
    <view
      class="wfsm-btn fs-26 fw-500 c-fff flex-center-center"
      @click="showExplainPop"
      >玩法说明</view
    >
    <view class="pad-28 bgc-fff br-12 calendar" style="margin: 32rpx">
      <view class="flex-between-center">
        <view class="flex-column-center">
          <view class="fs=32 fw-500 mr-28"
            ><text>已连续签到 </text>
            <text class="c-ff0000">{{ signIndex.days }}天</text>
          </view>
          <view class="fs-24 flex-column-center" @click="showCalendar"
            >日历<u-icon name="arrow-right" size="24rpx"></u-icon
          ></view>
        </view>
        <u-button
          :disabled="signIndex.today_is_sign == 1"
          :customStyle="btnStyle"
          @click="onSign"
          >{{
            signIndex.today_is_sign == 1 ? "今日已签到" : "立即签到"
          }}</u-button
        >
      </view>
      <view class="weeks flex-between-center mt-28 pl-24 pr-24">
        <text>日</text>
        <text>一</text>
        <text>二</text>
        <text>三</text>
        <text>四</text>
        <text>五</text>
        <text>六</text>
      </view>
      <view class="days flex-between-center mt-24">
        <block v-for="item in days" :key="item">
          <view class="day" v-if="item < today">
            <text class="fs-32 fw-500">{{ item }}</text>
            <text class="fs-20 mt-8" v-if="weekSignRecord.includes(+item)"
              >已签到</text
            >
          </view>
          <view class="day today-day" v-if="item == today">
            <text class="fs-32 fw-500 c-fff">今</text>
            <image src="/static/svg/circle.svg" class="w-10 h-10 mt-20"></image>
          </view>
          <view class="day last-day" v-if="item > today">
            <text class="fs-32 fw-500">{{ item }}</text>
          </view>
        </block>
      </view>
    </view>
    <view class="pad-32 bgc-fff br-12">
      <view class="fs-32 fw-500 mb-32">签到礼品</view>
      <z-paging
        :use-page-scroll="true"
        :refresher-enabled="false"
        :default-page-size="10"
        ref="pagingRef"
        v-model="dataList"
        @query="queryList"
      >
        <view
          class="pad-20 bgc-f7f8fa mb-28 br-12 flex-column-center"
          style="align-items: flex-start; position: relative"
          v-for="item in dataList"
          :key="item.id"
        >
          <u-image
            width="112rpx"
            height="112rpx"
            radius="12rpx"
            :src="item.image"
          ></u-image>
          <view style="width: 260rpx" class="ml-16">
            <u--text bold :lines="2" :text="item.title"></u--text>
          </view>
          <view class="goodsinfo fs-24">连续签到{{ item.days }}天获得</view>
        </view>
      </z-paging>
    </view>
    <wu-calendar
      :showMonth="false"
      :itemHeight="42"
      disabled
      disabledChoice
      :useToday="false"
      :todayDefaultStyle="false"
      color="#C5261D"
      :insert="false"
      maskClick
      ref="calendarRef"
      :selected="calendarSelected"
      @monthSwitch="onMonthSwitch"
    >
      <view slot="operation"></view>
    </wu-calendar>
    <ExplainPop
      ref="explainPopRef"
      title="玩法说明"
      btnText="我知道了"
    ></ExplainPop>
  </view>
</template>
<script>
import {
  signIndexApi,
  signApi,
  signRecordApi,
  signGoodsListApi,
} from "@/services/my";
import dayjs from "dayjs";
import isoWeek from "dayjs/plugin/isoWeek";
import ExplainPop from "@/components/ExplainPop.vue";
dayjs.extend(isoWeek);
export default {
  components: {
    ExplainPop,
  },
  data() {
    return {
      dataList: [],
      signIndex: {},
      weekSignRecord: [],
      btnStyle: {
        width: "128rpx",
        height: "52rpx",
        borderRadius: "40rpx",
        background: "#C5261D",
        border: "none",
        fontSize: "24rpx",
        fontWeight: 500,
        color: "#fff",
        padding: 0,
      },
      days: [],
      today: "",
      calendarShow: false,
      calendarSelected: [],
    };
  },
  async onLoad() {
    //获取签到首页
    this.getSignIndex();
    //获取这周的日期
    const start = dayjs().startOf("week"); // 获取本周周日
    const end = dayjs().endOf("week"); // 获取本周周日
    this.days = Array.from({ length: 7 }, (_, i) =>
      start.add(i, "day").format("D")
    );
    const startDate = start.format("YYYY-MM-DD");
    const endDate = end.format("YYYY-MM-DD");
    //获取这周的签到记录
    signRecordApi({
      start_date: startDate + " 00:00:00",
      end_date: endDate + " 23:59:59",
    }).then((res) => {
      this.weekSignRecord = res.data?.data?.map((item) => +item.day) || [];
    });
    //获取今天的日期
    const today = dayjs().format("D");
    this.today = today;
  },
  methods: {
    getSignIndex() {
      signIndexApi().then((res) => {
        this.signIndex = res.data || {};
      });
    },
    queryList(page, page_size) {
      signGoodsListApi({
        page,
        page_size,
      }).then((res) => {
        this.$refs.pagingRef?.complete(res.data?.data || []);
      });
    },
    getMonthStartAndEnd(year, month) {
      const start = dayjs(`${year}-${month}-01`).startOf("month");
      const end = dayjs(`${year}-${month}-01`).endOf("month");
      const monthStart = start.format("YYYY-MM-DD");
      const monthEnd = end.format("YYYY-MM-DD");
      this.getSignRecord(monthStart, monthEnd);
    },
    getSignRecord(start, end) {
      signRecordApi({
        start_date: start + " 00:00:00",
        end_date: end + " 23:59:59",
      }).then((res) => {
        const monthSignRecord = res.data?.data || [];
        this.calendarSelected = monthSignRecord.map((item) => ({
          date: item.year + "-" + item.month + "-" + item.day,
          // info: "+2",
          infoColor: "#C5261D",
          topInfo: "✔",
          topInfoColor: "#C5261D",
        }));
      });
    },
    showCalendar() {
      this.$refs.calendarRef.open();
      this.getMonthStartAndEnd(dayjs().format("YYYY"), dayjs().format("MM"));
    },
    showExplainPop() {
      this.$refs.explainPopRef.open();
    },
    onSign() {
      signApi().then(() => {
        this.$u.toast("签到成功!");
        // this.signIndex.today_is_sign = 1;
        this.getSignIndex();
      });
    },
    onMonthSwitch(date) {
      const { year, month } = date;
      this.getMonthStartAndEnd(year, month);
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  background: linear-gradient(180deg, #c5261d 0%, #fff 55%);

  /deep/.wu-calendar__backtoday {
    display: none;
  }

  /deep/.wu-calendar-item__weeks-lunar-text-topInfo {
    transform: translateY(40rpx) scale(1.8);
    opacity: 0.8;
  }

  .sign_img1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 496rpx;
    height: 496rpx;
  }

  .sign_img2 {
    position: relative;
    left: 48rpx;
    width: 168rpx;
    height: 184rpx;
  }

  .wfsm-btn {
    position: absolute;
    z-index: 9;
    top: 210rpx;
    right: 0;
    width: 140rpx;
    height: 52rpx;
    border-radius: 30rpx 0rpx 0rpx 30rpx;
    background: rgba(0, 0, 0, 0.3);
  }

  .calendar {
    position: relative;
    z-index: 9;
  }

  .days {
    .day {
      width: 76rpx;
      height: 124rpx;
      border-radius: 12rpx;
      background: rgba(197, 38, 29, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 28rpx;
      box-sizing: border-box;
    }

    .today-day {
      background: $theme-color;
    }

    .last-day {
      background: rgba(204, 204, 204, 0.3);
    }
  }

  .goodsinfo {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
  }
}
</style>